<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>班级信息</title>
		<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="stylesheet" href="../../css/font.css">
    <link rel="stylesheet" href="../../css/login.css">
	  <link rel="stylesheet" href="../../css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../js/xadmin.js"></script>
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a href="">演示</a>
            <a><cite>导航元素</cite></a>
          </span>
          <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
        </div>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                    
                    <div class="layui-card-body ">
                            <form class="layui-form layui-col-space5">
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  autocomplete="off" placeholder="类别" name="dictType" id="dictType">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  autocomplete="off" placeholder="条目" name="dictItem" id="dictItem">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <input class="layui-input"  autocomplete="off" placeholder="值" name="dictValue" id="dictValue">
                                </div>
                                <div class="layui-inline layui-show-xs-block">
                                    <button type="button" class="layui-btn" data-type="reload" id="queryRole">
					                    <i class="layui-icon">&#xe615;</i>
					                </button>
                                </div>
                            </form>
                        </div>
                        <div class="layui-card-header">
                            <button class="layui-btn" onclick="xadmin.open('添加基础数据','dict-add.html',800,600,true)">
                                <i class="layui-icon"></i>添加
                            </button>
                        </div>
                    
                        <div class="layui-card-body ">
                        
                            <table class="layui-table layui-form" id="test" lay-filter="test"></table>
                            
                        </div>
                    </div>
                </div>
            </div>
        </div> 
</body>
<script>
    $(function(){
    	layui.use([ 'table','form', 'layer','layedit', 'laydate' ], function(){
    	  $ = layui.jquery;
  		  var table = layui.table;
  		  var form = layui.form,layer = layui.layer;
  		  
  		  //第一个实例
  		  table.render({
  		    elem: '#test'
  		    ,id:"tableDataId"
  		    //请求的媒体类型
  		    ,url: '/../dict/findDictList' //数据接口
  		    ,cols: [[ //表头
  		    /* cols 绑定数据行列的， field对于的实体类属性名 ，title 列名 ，是否sort排序*/
  		      {field: 'dictId', title: '编号'}
  		      ,{field: 'dictType', title: '类型'}
  		      ,{field: 'dictItem', title: '条目'}
  		      ,{field: 'dictValue', title: '值'}
  		      ,{field: 'dictCreateTime', title: '创建时间'}
  		      ,{field: 'dictUpdateTime', title: '最后修改时间'}
  		      ,{field : '',title : '操作',toolbar : '#barDemo'}
  		    ]] 
  		  	,page: true //开启分页
  		    ,limit: 5 // 一页多少条
  		    ,limits:[5,10,15,20]  // 数据分页条
  		  });
  		  
  		$('#queryRole').on('click', function(){
            // reload 刷新表格数据
             table.reload("tableDataId",{
          	   //分页条件，就是说默认刷新到第一页
                 page:{
                     curr:1
                 },
                 //查询条件
                   where:{
                  	 dictType: $("input[name='dictType']").val(),
                  	 dictItem: $("input[name='dictItem']").val(),
                  	 dictValue: $("input[name='dictValue']").val()
                 }  
             })
         });
  		
  		table.on('tool(test)', function(obj) {
  			//获取的这一行数据
  			var data = obj.data;

  			
  			//obj.event 是菜单按钮的lay-event属性值 lay-event="edit"
  			if (obj.event === 'del') {
  				layer.confirm('真的删除行么', function(index) {
  					$.ajax({
  			            //请求方式
  			            type : "POST",
  			            //请求的媒体类型
  			            //contentType: "application/json;charset=UTF-8",
  			            //请求地址
  			            url : "/../dict/deleteDict",
  			            //数据，(json字符串 JSON.stringify(data)),
  			            data : {"dictId":data.dictId},
  			            //请求成功
  			            success : function(result) {
  			            	if(result>0){
  			            		//发异步，把数据提交给
  								layer.alert("删除成功", {
  									icon : 6
  								});
  			            	}else{
  			            		//发异步，把数据提交给php
  								layer.alert("删除失败！", {
  									icon : 6
  								});
  			            	}
  			            }
  			        });
  					//更新和刷新删除 缓存和表格
  					obj.del();
  					layer.close(index);
  					location.reload();
  				});
  			} else if (obj.event === 'edit') {
  				
  				//layer.alert('编辑行：<br>' + JSON.stringify(data));
  				//window的表单数据对象， 可用于页面之间值传输 
  				
  				//把这一行需要修改的数据 ，暂时存储到 系统的formData中 
  				window.formData = data;
  				
  				layer.open({
  					// 基本层类型：0（信息框，默认）1（页面层）2（iframe层，也就是解析content）3（加载层）4（tips层）
  			        type: 2 
  			        ,title: '修改基础数据'
  			        // 当type: 2 时就是url
  			        ,content: 'dict-update.html'
  			        // 宽高：如果是100%就是满屏
  			        ,area:['100%', '100%']
  					//缩小和还原工具栏
  					,maxmin: true
  				    ,offset:'t'
  			        ,success:function(layero,index){
  			        }
  			    });		
  			}
  		});
  		
  		  
    	});
    });
    </script>
    <!-- 加入想用layui的表达式 就使用layui tpl 表达式  d代表这这一行数据，  -->
    <script type="text/html" id="barDemo">
   		 	<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
 			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
    
</html>